<template>
  <div class="important">
    <MoniterItem title="重点场所码扫码情况" style="height: 40vh">
      <template #content>
        <div>
          <div style="height: 22vh">
            <div class="line" style="font-size: 14px; font-weight:600;">
              <div style="flex: 0.5">排名</div>
              <div style="flex: 1">场所名称</div>
              <div style="flex: 0.8">场所类型</div>
              <div style="flex: 0.8">当日扫码量</div>
              <div style="flex: 0.8">当日黄码量</div>
              <div style="flex: 0.8">当日红码量</div>
            </div>
            <div style="height: 70%; font-size: 14px; overflow: auto" id="tableList2">
              <div
                :class="{ line: true, lineColor: index % 2 === 1 }"
                v-for="(item, index) in tableData"
                :key="index"
                ref="tableRef"
              >
                <div style="flex: 0.5" class="circle-box">
                  <div class="circle">{{ index + 1 }}</div>
                </div>
                <div style="flex: 1">{{ item.placeName }}</div>
                <div style="flex: 0.8">{{ item.placeType }}</div>
                <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
                <div style="flex: 0.8; color: #FFD200">{{ item.yellows }}</div>
                <div style="flex: 0.8; color: #F95352">{{ item.reds }}</div>
              </div>
            </div>
          </div>
          <div class="scEffect" style="margin-top:20px;">
            <div class="scChart">
              <div id="scChart" style="height: 100%; width: 100%"></div>
              <div class="scChartDesc">
                <div style="color: #ffba77">8476</div>
                <div>总数</div>
              </div>
            </div>
            <div class="descItems">
              <div
                class="descItem"
                v-for="(item, index) in sceffectList"
                :key="index"
              >
                <div>{{ item.name }}</div>
                <div>
                  <span class="scText" :style="{ color: colorList[index] }">{{
                    item.value
                  }}</span>
                  人
                </div>
              </div>
            </div>
          </div>
        </div>
    </template>
  </MoniterItem>
  </div>
</template>

<script>
import MoniterItem from "@/components/MoniterCard.vue";
import request from "../../../utils/request.js";
import * as echarts from "echarts";
export default {
  components: {
    MoniterItem,
  },
  data() {
    return {
      sceffectList: [
        {
          name: "0-20岁",
          value: "127",
        },
        {
          name: "20-40岁",
          value: "127",
        },
        {
          name: "40-60岁",
          value: "127",
        },
        {
          name: "60岁以上",
          value: "127",
        },
      ],
      // 表格数据
      tableData: [
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        }
      ],
      myChartPie: null,
      colorList: ["#A1A4FD", "#FCB674", "#76DFFC", "#2FD5A4"],
    }
  },
  mounted() {
    // 饼图
    let domPie = document.getElementById("scChart");
    this.myChartPie = echarts.init(domPie, null, {
      renderer: "canvas",
      useDirtyRect: false,
    });

    this.getChartDataPie("月");
  },
  methods: {
    getChartDataPie(type) {
      request
        .get("place_scan_rec/placeSaceRate", { params: { period: type } })
        .then((res) => {
          const data = [];
          res.data.data.forEach((item) => {
            data.push({
              value: item.times,
              name: item.name,
            });
          });
          let optionPie = {
            tooltip: {
              trigger: "item",
            },
            grid: {
              left: "3%",
              right: "3%",
              bottom: "3%",
              containLabel: true,
            },
            // legend: {
            //   top: "21%",
            //   orient: "vertical",
            //   right: "7%",
            //   formatter: function (name) {
            //     // 获取legend显示内容
            //     let data = option.series[0].data;
            //     let total = 0;
            //     let tarValue = 0;
            //     for (let i = 0, l = data.length; i < l; i++) {
            //       total += data[i].value;
            //       if (data[i].name == name) {
            //         tarValue = data[i].value;
            //       }
            //     }
            //     let p = ((tarValue / total) * 100).toFixed(2);
            //     return name + " " + " " + p + "%";
            //   },
            //   textStyle: {
            //     //图例字体大小
            //     color: "#fff",
            //     fontSize: 16,
            //   },
            //   //图例大小
            //   itemHeight: 20,
            //   itemWidth: 30,
            //   //图例滚动显示
            //   type: "scroll",
            //   //图例纵向显示
            // },
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: ["38%", "70%"],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: "center",
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: "40",
                    fontWeight: "bold",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: [
                  { value: 1048, name: "小区", itemStyle: { color: "#3E9DFF" } },
                  { value: 735, name: "超市", itemStyle: { color: "#1ACFFF" } },
                  { value: 580, name: "医院", itemStyle: { color: "#42FBFE" } },
                  { value: 484, name: "公共场所", itemStyle: { color: "#37FAC6" } },
                ],
              },
            ],
          };

          // optionPie.series[0].data = data;
          if (optionPie && typeof optionPie === "object") {
            this.myChartPie.setOption(optionPie);
          }

          // window.addEventListener("resize", myChart.resize);
        });
    }
  },
}
</script>

<style lang="less" scoped>
.scEffect {
  height: 10vh;
  display: flex;
  flex-direction: row;

  .scChart {
    position: relative;
    margin-left: 20px;
    margin-top: -60px;
    height: 180px;
    width: 180px;
    .scChartDesc {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      top: 0;
      left: 0;
      color: white;
      z-index: 999;
      position: absolute;
    }
  }
  .descItems {
    display: flex;
    flex-direction: row;
    align-items: center;
    .descItem {
      box-shadow: inset 0px 0px 15px rgba(255, 255, 255, 0.5);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 74px;
      width: 65px;
      background-color: rgba(24, 119, 201, 1);
      margin: 10px;
      margin-top: -5px;
      border-radius: 5px;
      font-size: 14px;
      .scText {
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
}

// 表格样式
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}

.circle-box {
  display: flex;
  justify-content: center;
}

.circle {
  width: 21px;
  height: 21px;
  background-image: url('@/assets/circle.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
